<template>
  <div class="staff">
    <div class="staff-top">
       <div class="search-box">
          <el-form
            :inline="true"
            ref="search_data"
            :rules="rules"
            :model="search_data"
          >
            <el-form-item label="code:">
              <el-input type="text" v-model="search_data.code" placeholder="请输入code"></el-input>
            </el-form-item>
            <el-form-item label="phone:">
              <el-input type="text" v-model="search_data.phone" placeholder="请输入phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click='onSearch()'>筛选</el-button>
            </el-form-item>
          </el-form>
      </div>
    </div>
      <div class="tables">
           <el-table
            :data="dataList.list"
            border
            style="width: 100%">
            <el-table-column
                label="用户id"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="用户名"
                align="center"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userName }}</span>
                </template>
            </el-table-column>
             <el-table-column
                 label="手机号"
                 align="center"
                 width="180">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.phone }}</span>
               </template>
             </el-table-column>
             <el-table-column
                 label="code"
                 align="center"
                 width="180">
               <template slot-scope="scope">
                 <span style="margin-left: 10px">{{ scope.row.code }}</span>
               </template>
             </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataList.pageNum"
          :page-sizes="dataList.page_sizes"
          :page-size="dataList.pageSize"
          :layout="dataList.layout"
          :total="dataList.total">
        </el-pagination>
	 	  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {Message} from "element-ui";

export default {
  name: "userCouponCode",
  data() {
    return {
      dataList: {
        list: [],
        pageNum: 0,
        pageSize: 8,
        pages: 0,
        total: 0,
        page_sizes:[5,10,15,20], //每页显示多少条
				layout:'total, sizes, prev, pager, next, jumper'
      }, //数据存储
      form: {
        startTime: null,
        endTime: null,
      },
      num: 1,
      parameter: {
        options: [{
            id: null,
            code: null
        }],
        id: 0
      },
      search_data: {
         code: null,
         phone: null
      },
      rules:{
      },
    };
  },
  methods: {
    queryList(formData) {
      this.$axios
        .post("/api/userCouponCode/list",formData,{headers: {"token": localStorage.getItem("eleToken")}})
        .then(res => {
          this.dataList = res.data.data;
        }).catch(err => console.log(err));
    },
		handleSizeChange(page_size) {
				this.dataList.pageNum = 1; //第一页
				this.dataList.pageSize = page_size; //每页先显示多少数据
		},
		handleCurrentChange(page){
				// 跳转页数
				//获取每行数
				let pageSize = this.dataList.pageSize;
				const formData = {
                "isAsc": "desc",
                "orderBy": null,
                "orderByColumn": "id",
                "pageNum": page,
                "pageSize": pageSize
        }
        this.queryList(formData);
		},
    onSearch(){
      this.dataList.pageNum = 1;
      const formData = {
                "isAsc": "desc",
                "orderBy": null,
                "orderByColumn": "id",
                "pageNum": 0,
                "pageSize": this.dataList.pageSize,
                "code": this.search_data.code===''?null:this.search_data.code,
                "phone": this.search_data.phone===''?null:this.search_data.phone
      }
      console.log(formData);
      this.queryList(formData);
		},
    initQuery() {
      const formData = {
        "isAsc": "desc",
        "orderBy": null,
        "orderByColumn": "id",
        "pageNum": 0,
        "pageSize": this.dataList.pageSize,
      }
      this.queryList(formData);
    },
  },
  created() {
    this.initQuery()
  },
  components: {
  }
};
</script>
<style scoped>
.staff {
  margin: 10px;
}
.btnRight {
  float: right;
}
</style>
